<template>
  <view class="content">
    <view v-if="!commonStore.openId">
      <view class="text-center">
        <image class="logo" src="/static/logo/logo.png"/>
      </view>
      <view>~~~等待就绪！</view>
      <view class="row justify-center">
        <button class="login-button q-mt-lg" @click="goLogin">去登录</button>
      </view>
    </view>
    <view v-else class="q-px-xl q-my-xl full-width">

      <view class="row justify-center items-center">

        <image v-show="userData.avatarUrl" :src="userData.avatarUrl" class="avatar"/>

        <text class="name ">{{ userData.nickName }}</text>
        <uni-icons type="gear" size="16" @click="setProfile"></uni-icons>


      </view>

      <view class="row justify-center q-mt-xl">
        <button class="login-button q-mt-lg " style="font-size: 14px;" @click="commonStore.logout">退出登录</button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {useCommonStore} from "@/stores/commonStore";
import {computed,onMounted} from "vue";
import {onPullDownRefresh} from "@dcloudio/uni-app";

const commonStore = useCommonStore()
const userData = computed(() => commonStore.userData||{})

onPullDownRefresh(async () => {
  commonStore.getUserInfo();
  uni.stopPullDownRefresh()
})
onMounted(()=>{
  commonStore.getUserInfo();
})
function setProfile() {
  uni.navigateTo({
    url: './profile'
  })
}

function goLogin() {
  uni.navigateTo({
    url: '/pages/login/index'
  });
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}


.avatar {
  height: 80rpx;
  width: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.details {
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 32rpx;
  font-weight: bold;
}

.location {
  font-size: 28rpx;
  color: #888;
}

.gender, .language {
  font-size: 28rpx;
  color: #666;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}
</style>
